<template>
	<el-select v-model="selectedJxList" multiple  collapse-tags filterable @change="handleChange">
        <el-option label="全选" value="__vp_selectAll__"></el-option>
        <el-option v-for="(item,index) in models" :key="index" :label="item.jx"  :value="item.jx" >
        </el-option>
</el-select>
</template>
<script lang="ts">
import { computed, defineComponent,onMounted,reactive, ref, toRefs} from 'vue'
import request from '/@/utils/request'

export default defineComponent({
    name: 'AircraftModelMultSelect',
    emits: ['aircraftModelMultSelected'],
    props: {
        selected: {
            type: Array,
            default: [],
        },
        NA : {
            type: Boolean,
            default: false,
        },
        auth : {
            type: Boolean,
            default : false
        },
    },
    setup(props, context) {
        const state = reactive({
            loading: false,
            models:[],
            all:false,
        })
        const loadData = ()=>{
            state.loading = true
			request.get('/basicData/acmodel/list',{
                params:{
                    zt: 10,
                    allData: !props.auth,
                }
            }).then(res => {
                state.models = res?.data || []
                if(props.NA){
                    state.models.push({jx : "N/A"})
                }
 			}).finally(()=>{
				state.loading = false
			})
        }

        const selectedJxList = computed({
                get(){
                    let array = [] as string[];
                    if(props.selected){
                        state.models.forEach((val: any)=>{
                            if(props.selected.includes(val.jx)){
                                array.push(val.jx);
                            }
                        })
                        if(array.length>0 && array.length == state.models.length){
                            array.unshift("__vp_selectAll__");
                            state.all = true;
                        }
                    }
                    return array;
                },
                set(val){
                    // let index = val.indexOf("__vp_selectAll__");
                    // if(index > -1){
                    //     val.splice(index, 1);
                    // }
                    // context.emit("aircraftModelMultSelected", val);
                }
            })
       
        onMounted(()=>{
            loadData();
        })
        const selectRef = ref();


        const handleChange = (val)=>{
            let array=[];
            if(state.all){
                state.all =false;
                if(val.includes("__vp_selectAll__")){
                    array = val.filter(v => v!="__vp_selectAll__")
                }
            }else{
                if(val.includes("__vp_selectAll__")){
                    array = state.models.map((val)=>val.jx);
                    state.all = true;
                }else{
                    array = val;
                }
            }
            context.emit("aircraftModelMultSelected", array);
        }

        return {
            ...toRefs(state),
            selectRef,
            selectedJxList,
            handleChange,
        }
    }
})
</script>
